<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style>
  ul img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  li {
    display: inline-block;
  }

  .box img {
    width: 800px;
    height: 500px;
  }
</style>

<body>
  <div>
    <ul class="ul">
      <li>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654697936&t=1210454a31a0aeb0ce39aba796e39b17"
          alt="" />
      </li>
      <li>
        <img src="https://img0.baidu.com/it/u=4281860672,1981139753&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=320"
          alt="" />
      </li>
    </ul>
    <div class="box">
      <img src="https://img2.baidu.com/it/u=4010367258,1752169979&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="" />
    </div>
  </div>
  <!-- <img src="./image/s1.png" alt=""> -->
  <script>
    var img = [
      'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2016%2F0919%2F1_171052_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654697936&t=1210454a31a0aeb0ce39aba796e39b17',
      'https://img0.baidu.com/it/u=4281860672,1981139753&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=320',
      'https://img2.baidu.com/it/u=4010367258,1752169979&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'
    ]
    $(document).ready(function () {
      $('li').on({
        mouseover: function () {
          var index = $(this).index()
          $(this).children('img').css({ transform: 'scale(1.2)' })
          $('.box').children('img').attr('src', img[index])
        },
        mouseout: function () {
          $(this).children('img').css({ transform: 'scale(1)' })
        }
      })
    })
  </script>
</body>

</html>